@import "@/styles/variables.scss";

$tabbar-height:0.45rem;

.role {
  width: 100%;
  height: 100%;
}
.logout{
  position: absolute;
  z-index: 9;
  bottom: .1rem;
  right: .2rem;
  /* padding: .2rem; */
  border-radius: 50%;
  width: .5rem;
  text-align: center;
  height: .5rem;
  border: 1px solid #3A9BDE;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #3a9bde;
}
.role.customer {
  @include empty;

  .applyList {
    @include list;
  }
  
}

.role.manager {
  @include msgbox;
  
  .mint-button--default{
    position: absolute;
    z-index: 9;
    bottom: .49rem;
    right: 0;
    border: 0;
    background-color:unset;
    box-shadow:none
  }
  .tabbar {
    position: relative;
    width: 100%;
    height: $tabbar-height;
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #E5E5E5;

    .line {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 33.33%;
      height: 0.02rem;
      background-color: #3A9BDE;
      transition: all 0.15s;
    }

    .tabbar-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 0.16rem;

      &.active {
        color: #3A9BDE;
      }

      .title {
        position: relative;

        .badge {
          $diameter: 0.16rem;
          position: absolute;
          left: 100%;
          top: 0;
          transform: translateY(-40%);
          width: $diameter;
          height: $diameter;
          line-height: $diameter;
          text-align: center;
          border-radius: 50%;
          background-color: #f00;
          color: #fff;
          font-size: 0.12rem;

        }
      }
    }
  }

  .tab-container {
    background-color: transparent;
    height:calc(100% - #{$tabbar-height});
    cursor: pointer;

    .tab-container-item {
      width: 100%;
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;

      .tab-content {
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      @include empty;

      .list {
        @include list;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        // border:1px solid blue;
        .item {
          border-left: none;

          .head .btn-group button {
            $btn-color: #3A9BDE;
            color: $btn-color;
            border:0.01rem solid #{$btn-color};
          }

          .body {
            li .content {
              &.column {
                flex-direction: column;
                align-items: flex-start;
                p {
                  margin-bottom: 0.1rem;

                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }

              &.processed {
                color: #41b163;
              }

              &.closed {
                color: #e56151;
              }
            }
          }
        }
      }
    }
  }
}

@include pickerToolBar;